<template>
  <div>
    <h3>provide</h3>
    <Child />
  </div>
</template>

<script>
import Child from "./10-inject.vue";
import { provide, ref, onMounted } from "vue";
export default {
  components: {
    Child,
  },
  setup() {
    const name = ref("xiaojun");
    // provide现在是一个函数, 这个函数执行要两个参数，分别是key和value
    // 如果在setup里面的依赖注入，也想有响应式，传的值必须是响应式数据
    provide("name", name);
    onMounted(() => {
      setTimeout(() => {
        name.value = "junggegeee";
      }, 3000);
    });
  },
};
</script>

<style lang="less" scoped></style>
